<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI高考志愿推荐系统</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --accent-color: #e74c3c;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 20px 0;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            animation: pulse 8s infinite linear;
        }
        
        @keyframes pulse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .header-content {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 28px;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        nav ul li a:hover, nav ul li a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .page.active {
            display: block;
        }
        
        .hero {
            text-align: center;
            padding: 60px 20px;
            background-color: white;
            border-radius: 8px;
            margin: 30px 0;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        .hero h1 {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--dark-color);
        }
        
        .hero p {
            font-size: 18px;
            color: #666;
            max-width: 800px;
            margin: 0 auto 30px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
        }
        
        .btn-secondary:hover {
            background-color: #27ae60;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card i {
            font-size: 40px;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        .feature-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--dark-color);
        }
        
        /* 志愿推荐页面样式 */
        .recommendation-form {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .interests-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .interest-tag {
            display: inline-block;
            padding: 8px 16px;
            background-color: #e0e0e0;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .interest-tag:hover, .interest-tag.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .results-container {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .results-header h2 {
            color: var(--dark-color);
        }
        
        .sort-options select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .school-card {
            display: flex;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .school-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .school-image {
            width: 150px;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        
        .school-image i {
            font-size: 40px;
        }
        
        .school-info {
            flex: 1;
            padding: 20px;
        }
        
        .school-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .school-name {
            font-size: 20px;
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .favorite-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #ddd;
            transition: all 0.3s ease;
        }
        
        .favorite-btn.active, .favorite-btn:hover {
            color: var(--accent-color);
        }
        
        .school-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            color: #666;
            font-size: 14px;
        }
        
        .school-meta span {
            display: flex;
            align-items: center;
        }
        
        .school-meta i {
            margin-right: 5px;
        }
        
        .school-description {
            color: #666;
            margin-bottom: 15px;
        }
        
        .match-score {
            display: inline-block;
            padding: 4px 10px;
            background-color: var(--secondary-color);
            color: white;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
        }
        
        /* 我的收藏页面样式 */
        .favorites-container {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
        }
        
        .empty-favorites {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        .empty-favorites i {
            font-size: 60px;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        .empty-favorites p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 20px;
                justify-content: center;
            }
            
            nav ul li {
                margin: 0 10px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .school-card {
                flex-direction: column;
            }
            
            .school-image {
                width: 100%;
                height: 120px;
            }
        }
        
        /* 加载动画 */
        .loader {
            display: none;
            text-align: center;
            padding: 30px;
        }
        
        .loader i {
            font-size: 40px;
            color: var(--primary-color);
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* AI 推荐结果样式 */
        .ai-recommendation {
            background-color: #f8f9fa;
            border-left: 4px solid var(--primary-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }

        .ai-recommendation h3 {
            color: var(--dark-color);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .ai-recommendation h3 i {
            margin-right: 10px;
            color: var(--primary-color);
        }

        .ai-recommendation p {
            line-height: 1.6;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>AI高考志愿推荐系统</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="recommend">志愿推荐</a></li>
                    <li><a href="#" class="nav-link" data-page="favorites">我的收藏</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <div class="container">
        <!-- 首页 -->
        <div class="page active" id="home">
            <div class="hero">
                <h1>基于AI的高考志愿推荐</h1>
                <p>利用先进的DeepSeek AI技术，根据你的分数、兴趣和职业规划，为你提供个性化的大学和专业推荐</p>
                <a href="#" class="btn btn-secondary start-recommend">开始智能推荐</a>
            </div>
            
            <div class="features">
                <div class="feature-card">
                    <i class="fas fa-brain"></i>
                    <h3>DeepSeek AI驱动</h3>
                    <p>基于DeepSeek强大的AI模型，提供更精准、更个性化的志愿推荐服务</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-heart"></i>
                    <h3>多维分析</h3>
                    <p>综合考虑分数、兴趣、职业前景等多维度因素，提供全面分析</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>实时数据</h3>
                    <p>结合最新录取数据和就业趋势，确保推荐结果与时俱进</p>
                </div>
            </div>
        </div>
        
        <!-- 志愿推荐页面 -->
        <div class="page" id="recommend">
            <div class="recommendation-form">
                <h2>填写你的信息</h2>
                <form id="recommend-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="score">高考分数</label>
                            <input type="number" id="score" class="form-control" placeholder="请输入你的高考分数" required>
                        </div>
                        <div class="form-group">
                            <label for="province">所在省份</label>
                            <select id="province" class="form-control" required>
                                <option value="">请选择省份</option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广东">广东</option>
                                <option value="江苏">江苏</option>
                                <option value="浙江">浙江</option>
                                <option value="湖北">湖北</option>
                                <option value="四川">四川</option>
                                <option value="山东">山东</option>
                                <option value="河南">河南</option>
                                <option value="河北">河北</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>文理科</label>
                            <div style="display: flex; gap: 20px;">
                                <label style="display: flex; align-items: center;">
                                    <input type="radio" name="subject" value="文科" checked style="margin-right: 8px;"> 文科
                                </label>
                                <label style="display: flex; align-items: center;">
                                    <input type="radio" name="subject" value="理科" style="margin-right: 8px;"> 理科
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="major">意向专业</label>
                            <input type="text" id="major" class="form-control" placeholder="请输入你感兴趣的专业">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>兴趣爱好</label>
                        <div class="interests-container">
                            <span class="interest-tag">计算机</span>
                            <span class="interest-tag">医学</span>
                            <span class="interest-tag">金融</span>
                            <span class="interest-tag">教育</span>
                            <span class="interest-tag">艺术</span>
                            <span class="interest-tag">工程</span>
                            <span class="interest-tag">法律</span>
                            <span class="interest-tag">管理</span>
                            <span class="interest-tag">外语</span>
                            <span class="interest-tag">设计</span>
                        </div>
                        <input type="hidden" id="interests">
                    </div>
                    
                    <div class="form-group">
                        <label for="career-goal">职业规划</label>
                        <textarea id="career-goal" class="form-control" rows="3" placeholder="请简要描述你的职业规划或未来发展方向"></textarea>
                    </div>
                    
                    <button type="submit" class="btn">智能匹配推荐</button>
                </form>
            </div>
            
            <div class="loader" id="loader">
                <i class="fas fa-spinner"></i>
                <p>DeepSeek AI正在为你分析并推荐最适合的院校...</p>
            </div>
            
            <div class="results-container" id="results-container" style="display: none;">
                <div class="results-header">
                    <h2>AI推荐结果</h2>
                    <div class="sort-options">
                        <select id="sort-by">
                            <option value="match">按匹配度</option>
                            <option value="score">按录取分数</option>
                            <option value="rank">按学校排名</option>
                        </select>
                    </div>
                </div>
                
                <div id="ai-analysis" class="ai-recommendation" style="display: none;">
                    <h3><i class="fas fa-robot"></i> DeepSeek AI分析</h3>
                    <p id="ai-analysis-text"></p>
                </div>
                
                <div id="schools-list"></div>
            </div>
        </div>
        
        <!-- 我的收藏页面 -->
        <div class="page" id="favorites">
            <div class="favorites-container">
                <h2>我的收藏</h2>
                
                <div id="favorites-list">
                    <div class="empty-favorites" id="empty-favorites">
                        <i class="fas fa-bookmark"></i>
                        <p>你还没有收藏任何学校</p>
                        <a href="#" class="btn start-recommend">去推荐页面</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // DeepSeek API 配置
        const DEEPSEEK_API_KEY = "sk-c6a7fb0a88f04c45a858716ce9aec15c";
        const DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions";
        
        // 页面切换逻辑
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新导航栏状态
                document.querySelectorAll('.nav-link').forEach(navLink => {
                    navLink.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换页面
                const pageId = this.getAttribute('data-page');
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
                
                // 如果是收藏页面，更新收藏列表
                if (pageId === 'favorites') {
                    updateFavoritesList();
                }
            });
        });
        
        // 首页"开始推荐"按钮
        document.querySelector('.start-recommend').addEventListener('click', function(e) {
            e.preventDefault();
            
            // 切换到推荐页面
            document.querySelectorAll('.nav-link').forEach(navLink => {
                navLink.classList.remove('active');
            });
            document.querySelector('.nav-link[data-page="recommend"]').classList.add('active');
            
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById('recommend').classList.add('active');
        });
        
        // 兴趣标签选择
        document.querySelectorAll('.interest-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                this.classList.toggle('active');
                updateInterestsInput();
            });
        });
        
        function updateInterestsInput() {
            const selectedInterests = Array.from(document.querySelectorAll('.interest-tag.active'))
                .map(tag => tag.textContent);
            document.getElementById('interests').value = selectedInterests.join(',');
        }
        
        // 模拟的学校数据
        const schoolData = [
            {
                id: 1,
                name: "清华大学",
                province: "北京",
                score: 690,
                rank: 1,
                major: "计算机科学与技术,电子信息工程,建筑学",
                description: "清华大学是中国著名高等学府，坐落于北京西北郊风景秀丽的清华园，是中国高层次人才培养和科学技术研究的重要基地。",
                matchScore: 95
            },
            {
                id: 2,
                name: "北京大学",
                province: "北京",
                score: 685,
                rank: 2,
                major: "经济学,法学,临床医学",
                description: "北京大学创立于1898年，初名京师大学堂，是中国第一所国立综合性大学，也是当时中国最高教育行政机关。",
                matchScore: 92
            },
            {
                id: 3,
                name: "浙江大学",
                province: "浙江",
                score: 670,
                rank: 3,
                major: "计算机科学与技术,电气工程,医学",
                description: "浙江大学是一所历史悠久、声誉卓著的高等学府，坐落于中国历史文化名城、风景旅游胜地杭州。",
                matchScore: 88
            },
            {
                id: 4,
                name: "复旦大学",
                province: "上海",
                score: 675,
                rank: 4,
                major: "金融学,新闻学,临床医学",
                description: "复旦大学创建于1905年，原名复旦公学，是中国人自主创办的第一所高等院校，创始人为中国近代知名教育家马相伯。",
                matchScore: 85
            },
            {
                id: 5,
                name: "上海交通大学",
                province: "上海",
                score: 680,
                rank: 5,
                major: "机械工程,船舶与海洋工程,计算机科学",
                description: "上海交通大学是我国历史最悠久、享誉海内外的著名高等学府之一，是教育部直属并与上海市共建的全国重点大学。",
                matchScore: 83
            },
            {
                id: 6,
                name: "南京大学",
                province: "江苏",
                score: 665,
                rank: 6,
                major: "天文学,地质学,汉语言文学",
                description: "南京大学坐落于钟灵毓秀、虎踞龙蟠的金陵古都，是一所历史悠久、声誉卓著的百年名校。",
                matchScore: 80
            }
        ];
        
        // 收藏功能
        let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
        
        function toggleFavorite(schoolId) {
            const index = favorites.indexOf(schoolId);
            if (index === -1) {
                favorites.push(schoolId);
            } else {
                favorites.splice(index, 1);
            }
            localStorage.setItem('favorites', JSON.stringify(favorites));
            updateFavoriteButtons();
        }
        
        function isFavorite(schoolId) {
            return favorites.includes(schoolId);
        }
        
        function updateFavoriteButtons() {
            document.querySelectorAll('.favorite-btn').forEach(btn => {
                const schoolId = parseInt(btn.getAttribute('data-school-id'));
                if (isFavorite(schoolId)) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }
        
        function updateFavoritesList() {
            const container = document.getElementById('favorites-list');
            
            if (favorites.length === 0) {
                container.innerHTML = `
                    <div class="empty-favorites" id="empty-favorites">
                        <i class="fas fa-bookmark"></i>
                        <p>你还没有收藏任何学校</p>
                        <a href="#" class="btn start-recommend">去推荐页面</a>
                    </div>
                `;
                // 重新绑定事件
                document.querySelector('.start-recommend').addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector('.nav-link[data-page="recommend"]').click();
                });
                return;
            }
            
            let html = '<div class="schools-list">';
            
            favorites.forEach(schoolId => {
                const school = schoolData.find(s => s.id === schoolId);
                if (school) {
                    html += `
                        <div class="school-card">
                            <div class="school-image">
                                <i class="fas fa-university"></i>
                            </div>
                            <div class="school-info">
                                <div class="school-header">
                                    <div class="school-name">${school.name}</div>
                                    <button class="favorite-btn active" data-school-id="${school.id}">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                                <div class="school-meta">
                                    <span><i class="fas fa-map-marker-alt"></i> ${school.province}</span>
                                    <span><i class="fas fa-star"></i> 排名: ${school.rank}</span>
                                    <span><i class="fas fa-graduation-cap"></i> 录取分: ${school.score}</span>
                                </div>
                                <div class="school-description">${school.description}</div>
                                <div>
                                    <span class="match-score">匹配度: ${school.matchScore}%</span>
                                </div>
                            </div>
                        </div>
                    `;
                }
            });
            
            html += '</div>';
            container.innerHTML = html;
            
            // 绑定收藏按钮事件
            document.querySelectorAll('.favorite-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const schoolId = parseInt(this.getAttribute('data-school-id'));
                    toggleFavorite(schoolId);
                    updateFavoritesList();
                });
            });
        }
        
        // 调用DeepSeek API获取AI分析
        async function getDeepSeekAnalysis(userData) {
            try {
                const prompt = `
                你是一个高考志愿推荐专家，请根据以下学生信息提供志愿推荐建议：
                - 高考分数: ${userData.score}
                - 所在省份: ${userData.province}
                - 文理科: ${userData.subject}
                - 意向专业: ${userData.major || '未指定'}
                - 兴趣爱好: ${userData.interests || '未指定'}
                - 职业规划: ${userData.careerGoal || '未指定'}
                
                请提供:
                1. 简要分析学生的优势和适合的方向
                2. 推荐3-5个适合的大学专业组合
                3. 提供一些志愿填报的策略建议
                
                回答请使用中文，内容要专业、实用，适合高中生理解。
                `;
                
                const response = await fetch(DEEPSEEK_API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat",
                        messages: [
                            {
                                role: "user",
                                content: prompt
                            }
                        ],
                        temperature: 0.7
                    })
                });
                
                const data = await response.json();
                return data.choices[0].message.content;
            } catch (error) {
                console.error('调用DeepSeek API出错:', error);
                return "抱歉，AI分析暂时不可用。以下是基于您信息的常规推荐:";
            }
        }
        
        // 表单提交
        document.getElementById('recommend-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 显示加载动画
            document.getElementById('loader').style.display = 'block';
            document.getElementById('results-container').style.display = 'none';
            
            // 收集用户数据
            const userData = {
                score: parseInt(document.getElementById('score').value),
                province: document.getElementById('province').value,
                subject: document.querySelector('input[name="subject"]:checked').value,
                major: document.getElementById('major').value,
                interests: document.getElementById('interests').value,
                careerGoal: document.getElementById('career-goal').value
            };
            
            try {
                // 调用DeepSeek API获取AI分析
                const aiAnalysis = await getDeepSeekAnalysis(userData);
                
                // 隐藏加载动画
                document.getElementById('loader').style.display = 'none';
                
                // 显示结果
                document.getElementById('results-container').style.display = 'block';
                
                // 显示AI分析
                document.getElementById('ai-analysis').style.display = 'block';
                document.getElementById('ai-analysis-text').innerHTML = aiAnalysis.replace(/\n/g, '<br>');
                
                // 生成推荐结果
                generateRecommendations(userData);
            } catch (error) {
                console.error('处理推荐时出错:', error);
                document.getElementById('loader').style.display = 'none';
                alert('推荐过程中出现错误，请稍后再试。');
            }
        });
        
        // 生成推荐结果
        function generateRecommendations(userData) {
            const score = userData.score;
            const province = userData.province;
            const major = userData.major;
            
            // 根据分数筛选学校
            let filteredSchools = schoolData.filter(school => {
                // 模拟匹配逻辑
                const scoreDiff = Math.abs(school.score - score);
                const provinceMatch = province ? school.province === province : true;
                const majorMatch = major ? school.major.includes(major) : true;
                
                // 计算匹配度
                let matchScore = 100 - scoreDiff;
                if (provinceMatch) matchScore += 5;
                if (majorMatch) matchScore += 10;
                
                school.matchScore = Math.min(100, matchScore);
                
                return scoreDiff < 50; // 分数差在50分以内
            });
            
            // 按匹配度排序
            filteredSchools.sort((a, b) => b.matchScore - a.matchScore);
            
            // 显示结果
            displaySchools(filteredSchools);
        }
        
        // 显示学校列表
        function displaySchools(schools) {
            const container = document.getElementById('schools-list');
            container.innerHTML = '';
            
            if (schools.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #666;">没有找到匹配的学校，请尝试调整筛选条件。</p>';
                return;
            }
            
            schools.forEach(school => {
                const schoolCard = document.createElement('div');
                schoolCard.className = 'school-card';
                schoolCard.innerHTML = `
                    <div class="school-image">
                        <i class="fas fa-university"></i>
                    </div>
                    <div class="school-info">
                        <div class="school-header">
                            <div class="school-name">${school.name}</div>
                            <button class="favorite-btn ${isFavorite(school.id) ? 'active' : ''}" data-school-id="${school.id}">
                                <i class="fas fa-heart"></i>
                            </button>
                        </div>
                        <div class="school-meta">
                            <span><i class="fas fa-map-marker-alt"></i> ${school.province}</span>
                            <span><i class="fas fa-star"></i> 排名: ${school.rank}</span>
                            <span><i class="fas fa-graduation-cap"></i> 录取分: ${school.score}</span>
                        </div>
                        <div class="school-description">${school.description}</div>
                        <div>
                            <span class="match-score">匹配度: ${school.matchScore}%</span>
                        </div>
                    </div>
                `;
                container.appendChild(schoolCard);
            });
            
            // 绑定收藏按钮事件
            document.querySelectorAll('.favorite-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const schoolId = parseInt(this.getAttribute('data-school-id'));
                    toggleFavorite(schoolId);
                });
            });
        }
        
        // 排序功能
        document.getElementById('sort-by').addEventListener('change', function() {
            const sortBy = this.value;
            const schools = Array.from(document.querySelectorAll('.school-card'));
            
            schools.sort((a, b) => {
                const aScore = parseInt(a.querySelector('.match-score').textContent.match(/\d+/)[0]);
                const bScore = parseInt(b.querySelector('.match-score').textContent.match(/\d+/)[0]);
                const aRank = parseInt(a.querySelector('.school-meta span:nth-child(2)').textContent.match(/\d+/)[0]);
                const bRank = parseInt(b.querySelector('.school-meta span:nth-child(2)').textContent.match(/\d+/)[0]);
                const aAdmission = parseInt(a.querySelector('.school-meta span:nth-child(3)').textContent.match(/\d+/)[0]);
                const bAdmission = parseInt(b.querySelector('.school-meta span:nth-child(3)').textContent.match(/\d+/)[0]);
                
                if (sortBy === 'match') {
                    return bScore - aScore;
                } else if (sortBy === 'score') {
                    return bAdmission - aAdmission;
                } else if (sortBy === 'rank') {
                    return aRank - bRank;
                }
                return 0;
            });
            
            const container = document.getElementById('schools-list');
            container.innerHTML = '';
            schools.forEach(school => container.appendChild(school));
        });
    </script>
</body>
</html>